﻿<div class='instruction-wrapper'>
  <div data-ui='playlistEmptyMessage' class='instruction'>
    <div class='instruction-header'>
      <%= playlistEmptyMessage %>
    </div>
    <div class='instruction-content'>
      <%= wouldYouLikeToMessage %> <span data-ui='showSearchLink' class='u-link u-lowercase'><%= searchForSongsMessage %></span>?
    </div>
  </div>

  <div data-region='playlistItems' class='flexColumn'></div>
</div>

<div class='contentBar contentBar--bottom u-bordered--top flexColumn-bugFix'>
  <div class='contentBar--bottom-text--left flexRow'>
    <div data-ui='playlistDetails textTooltipable' class='u-lowercase u-textOverflowEllipsis text u-textSecondary'></div>
  </div>

  <div data-ui='playAllButton' class='button button--flat'>
    <%= playAllMessage %>
  </div>

  <div data-ui='addAllButton tooltipable' class='button button--flat'>
    <%= addAllMessage %>
  </div>
</div>